<template>
  <el-menu :unique-opened="opend" background-color="#132742" text-color="hsla(0, 0%, 100%, .7)" active-text-color="">
    <div v-for="(item, index) in navList" :key="index">
      <el-submenu :index="index+item.title" v-if="!!item.children">
        <template slot="title"><i :class="item.icon"></i>{{ item.title }}</template>
        <left-menu :navList="item.children"></left-menu>
      </el-submenu>
      <el-menu-item :index="index+item.title" v-else>
        <template slot="title"><i :class="item.icon"></i>{{ item.title }}</template>
        <left-menu :navList="item.children"></left-menu>
      </el-menu-item>
    </div>
  </el-menu>
</template>

<script>

export default {
  name:'LeftMenu',
  props: ["navList"],
  data() {
    return {
      opend:true
    }
  }
}
</script>

<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>